<!DOCTYPE html>

<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>二手手机收售管理系统</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&amp;subset=all"
          rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="assets/plugins/owl.carousel/assets/owl.carousel.css" rel="stylesheet">
    <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="assets/pages/css/components.css" rel="stylesheet">
    <link href="assets/corporate/css/style.css" rel="stylesheet">
    <link href="assets/pages/css/style-shop.css" rel="stylesheet" type="text/css">
    <link href="assets/corporate/css/style-responsive.css" rel="stylesheet">
    <link href="assets/corporate/css/themes/red.css" rel="stylesheet" id="style-color">
    <link href="assets/corporate/css/custom.css" rel="stylesheet">


    <script type="text/javascript" src="laydate/laydate.js"></script>
    <script type="text/javascript">
        //执行一个laydate实例
        laydate.render({
            elem: '#birthtime',
            //type: 'datetime'//指定元素
        });

    </script>

    <style>
        /*验证码*/

        .upload-awrp {
            overflow: hidden;
            margin: 120px 0;
        }

        .code {
            font-family: Arial;
            font-style: italic;
            font-size: 15px;
            border: 0;
            padding: 0px 10px 0px 10px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            height: 34px;
            line-height: 34px;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #DDDDDD;
            margin-left: -1px;
        }
    </style>
    <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body class="ecommerce">
<!-- BEGIN STYLE CUSTOMIZER -->
<div class="color-panel hidden-sm">
    <div class="color-mode-icons icon-color"></div>
    <div class="color-mode-icons icon-color-close"></div>
    <div class="color-mode">
        <p>THEME COLOR</p>
        <ul class="inline">
            <li class="color-red current color-default" data-style="red"></li>
            <li class="color-blue" data-style="blue"></li>
            <li class="color-green" data-style="green"></li>
            <li class="color-orange" data-style="orange"></li>
            <li class="color-gray" data-style="gray"></li>
            <li class="color-turquoise" data-style="turquoise"></li>
        </ul>
    </div>
</div>
<!-- END BEGIN STYLE CUSTOMIZER -->

<!-- BEGIN TOP BAR -->
<div class="pre-header" id="loginiframe">

</div>
<!-- END TOP BAR -->

<!-- BEGIN HEADER -->
<div class="header">
    <div class="container" id="headeriframe">
        <!-- BEGIN CART -->
        <!--END CART -->
        <!-- BEGIN NAVIGATION -->
        <!-- END NAVIGATION -->
    </div>
</div>
<!-- Header END -->

<div class="main">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="index.html">首页</a></li>
            <li class="active">登录</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
            <!-- BEGIN CONTENT -->
            <div class="col-md-12 col-sm-12">
                <!-- BEGIN CHECKOUT PAGE -->
                <div class="panel-group checkout-page accordion scrollable" id="checkout-page">
                    <div id="payment-address" class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title">
                                <a data-toggle="collapse" data-parent="#checkout-page" href="#payment-address-content"
                                   class="accordion-toggle">
                                    登录
                                </a>
                            </h2>
                        </div>
                        <div id="payment-address-content" class="panel-collapse collapse in">
                            <div class="panel-body row" id="app">
                                <div class="col-md-6 col-sm-6">
                                    <h3>请在下方填写您的信息</h3>


                                    <div class="form-group">
                                        <label for="uname">用户名 <span class="require">*</span></label>
                                        <input type="text" id="uname" v-model="uname" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="upass">密码 <span class="require">*</span></label>
                                        <input type="password" id="upass" v-model="upass" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="yzm">验证码 <span class="require">*</span></label>

                                        <div style="display:flex;" >
                                        <input type="text" id="yzm" v-model="yzm" class="form-control" style="width: 83%">
                                        <div id="check-code" style="overflow: hidden;">
                                            <div class="code" id="data_code"></div>
                                            <input type="hidden" value="" name="hiddenyzm" id="hiddenyzm">
                                        </div>
                                        </div>
                                    </div>


                                    <div class="col-md-12">
                                        <button @click="log()" class="btn btn-primary  pull-left" data-toggle="collapse"
                                                data-parent="#checkout-page" data-target="#shipping-address-content"
                                                id="button-payment-address">登录
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- END PAYMENT ADDRESS -->

                        <!-- BEGIN SHIPPING ADDRESS -->

                        <!-- END SHIPPING ADDRESS -->

                        <!-- BEGIN SHIPPING METHOD -->

                        <!-- END SHIPPING METHOD -->

                        <!-- BEGIN PAYMENT METHOD -->

                        <!-- END PAYMENT METHOD -->

                        <!-- BEGIN CONFIRM -->

                        <!-- END CONFIRM -->
                    </div>
                    <!-- END CHECKOUT PAGE -->
                </div>
                <!-- END CONTENT -->
            </div>
            <!-- END SIDEBAR & CONTENT -->
        </div>
    </div>

    <!-- BEGIN STEPS -->
    <!-- END STEPS -->

    <!-- BEGIN PRE-FOOTER -->

    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer" id="footiframe" style="position: absolute;bottom: 0px;width: 100%">

    </div>
    <!-- END FOOTER -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>
    <![endif]-->
    <script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="assets/corporate/scripts/back-to-top.js" type="text/javascript"></script>

    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
    <script src="assets/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script>
    <!-- slider for products -->
    <script src='assets/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script><!-- product zoom -->
    <script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
    <!-- Quantity -->
    <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>

    <script src="assets/corporate/scripts/layout.js" type="text/javascript"></script>
    <script src="assets/pages/scripts/checkout.js" type="text/javascript"></script>

</body>


<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    window.onload = function () {
        $("#loginiframe").load("iframe/loginiframe.html")
        $("#headeriframe").load("iframe/headeriframe.html")
        $("#footiframe").load("iframe/footiframe.html")
    }

</script>

<script type="text/javascript">



<!-- END PAGE LEVEL JAVASCRIPTS -->



    var qs = Qs
    var vm = new Vue({
        el: "#app",
        data: {
            uname: "",
            upass: "",
            yzm:"",
            hiddenyzm:"",
        },
        mounted() {
            jQuery(document).ready(function () {
                Layout.init();
                Layout.initOWL();
                //Layout.initTwitter();
                Layout.initImageZoom();
                Layout.initTouchspin();
                Layout.initUniform();
                Checkout.init();
            });




            /**
             * 验证码
             * @param {Object} o 验证码长度
             */
            $.fn.code_Obj = function(o) {
                var _this = $(this);
                var options = {
                    code_l: o.codeLength,//验证码长度
                    codeChars: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
                    ],
                    codeColors: ['#f44336', '#009688', '#cddc39', '#03a9f4', '#9c27b0', '#5e4444', '#9ebf9f', '#ffc8c4', '#2b4754', '#b4ced9', '#835f53', '#aa677e'],
                    code_Init: function() {
                        var code = "";
                        var codeColor = "";
                        var checkCode = _this.find("#data_code");
                        for(var i = 0; i < this.code_l; i++) {
                            var charNum = Math.floor(Math.random() * 52);
                            code += this.codeChars[charNum];
                        }
                        for(var i = 0; i < this.codeColors.length; i++) {
                            var charNum = Math.floor(Math.random() * 12);
                            codeColor = this.codeColors[charNum];
                        }
                        console.log(code);
                        if(checkCode) {
                            checkCode.css('color', codeColor);
                            checkCode.className = "code";
                            checkCode.text(code);
                            checkCode.attr('data-value', code.toLowerCase());
                            $("#hiddenyzm").attr('value', code.toLowerCase());
                        }
                    }
                };

                options.code_Init();//初始化验证码
                _this.find("#data_code").bind('click', function() {
                    options.code_Init();
                });
            };

            $('#check-code').code_Obj({
                codeLength: 5
            });
        },
        methods: {
            log() {
                this.hiddenyzm = $("#hiddenyzm").val()
                if (this.uname == "") {
                    layer.msg("用户名不能为空", {icon: 5})
                    return false;
                }
                if (this.upass == "") {
                    layer.msg("密码不能为空", {icon: 5})
                    return false;
                }
                if (this.yzm == "") {
                    layer.msg("验证码不能为空", {icon: 5})
                    return false;
                }

                if (this.yzm != this.hiddenyzm) {
                    layer.msg("验证码输入错误", {icon: 5})
                    this.yzm=""
                    return false;
                }
                axios.post('Login', qs.stringify({
                    uname: this.uname,
                    upass: this.upass,
                    status: "正常",
                })).then(response => {
                    if (response.data.data == 200) {
                        location.replace("index.html")
                    } else if (response.data.data == 400) {
                        layer.msg("用户名或密码错误", {icon: 5})
                        this.uname = ""
                        this.upass = ""
                        this.yzm = ""
                    } else {
                        layer.msg("帐号冻结", {icon: 5})
                        this.uname = ""
                        this.upass = ""
                        this.yzm = ""
                    }
                }).catch(error => {
                    console.log(error)
                })
            },


        }
    })
</script>

<!-- END BODY -->
</html>